<template>
  <div class="text-monospace">{{ loadingTxt }}</div>
</template>

<script>

export default {

  data() {
    return {
      loadingTxt: "Loading",
      loadingDot: 0,
      interval: 0,
    }
  },

  mounted() {
    this.interval = window.setInterval(() => {
      this.loadingDot += 1;
      if (this.loadingDot === 4) {
        this.loadingDot = 0;
      }
      let loadingTxt = "Loading";
      for (let i=0;i<this.loadingDot;i++) {
        loadingTxt = this.loadingTxt.concat('.')
      }
      this.loadingTxt = loadingTxt
    }, 800)
  },

  unmounted() {
    clearInterval(this.interval)
  }
}
</script>

<style scoped>
</style>